<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot="top">
				<view class="search-header">
					<view class="search-bar-box">
						<view class="search-bar">
							<u-icon name="search" size="20" color="#999999"></u-icon>
							<input type="text" placeholder="请输入关键字搜索" v-model="queryForm.kw"
								@input="$u.throttle(refreshList, 500)" placeholder-class="placeholder" />
						</view>
					</view>
					<view class="search-tip-box">
						<text v-if="!isSaveInput">请输入新的表值，点击“上期”可以查看抄表</text>
						<text v-if="isSaveInput" style="color: #00aa7f">正在抄表,请勿刷新页面 </text>
					</view>
				</view>
			</view>
			<view class="building-list">
				<view class="building-item" v-for="(build, index) in dataList" :key="index">
					<view class="building-box">
						<view class="building-name">{{ build.build_name }}</view>
						<view class="room-name">{{build.name}}</view>
					</view>
					<view class="meter-lsit">
						<view class="meter-item" v-for="(meter, meterIndex) in build.borad" :key="meterIndex">
							<view class="meter-title">{{meter.time}} {{meter.name}}：{{meter.num}}
								<text v-if="meter.last_num" style="margin-left: 20rpx;"
									@click="$Tips('/pages-landlord/meter-reading/meter-record?room_id='+build.room_id+'&type='+meter.type)">上期：{{meter.last_num}}</text>
							</view>
							<view class="meter-value">
								<input type="number" placeholder="请输入水表值" v-model="meter.new_num" v-if="meter.type==1"
									@blur="saveMeterValue(build,meter)" />
								<input type="number" placeholder="请输入电表值" v-model="meter.new_num" v-if="meter.type==2"
									@blur="saveMeterValue(build,meter)" />
								<input type="number" placeholder="请输入燃气表值" v-model="meter.new_num" v-if="meter.type==3"
									@blur="saveMeterValue(build,meter)" />
								<!--<input type="number" placeholder="请输入热水表值" v-model="meter.num" v-if="meter.type==='热水'"-->
								<!--@blur="saveMeterValue(build,meter)" />-->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view slot="bottom">
				<view class="safe-bottom action-bar">
					<view class="action-item" @click="handleType">类型</view>
					<view class="action-item" @click="handleAll">全部大楼</view>
					<view class="action-item" @click="handleStatus">状态</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		biaoAdd,
		biaoIndex
	} from '@/api/landlord'
	export default {
		data() {
			return {
				keywords: null,
				isSaveInput: false, // 是否正在保存输入
				dataList: [], // 数据列表
				queryForm: {
					flag: 0, // 状态标识
					kw: '', // 关键字
					build_id: '', // 大楼ID
				}
			}
		},
		onLoad() {
			uni.$on('selectBuilding', (building) => {
				this.queryForm.build_id = building.id; // 设置选中的大楼ID
				this.refreshList(); // 刷新列表
			});
		},
		onUnload() {
			uni.$off('selectBuilding'); // 清除事件监听
		},
		methods: {
			saveMeterValue(build, meter) {
				// if(meter.new_num<meter.last_num){
				//   return this.$Toast('新表值不能小于上期表值');
				// }
				if (this.isSaveInput) {
					return this.$Toast('正在保存，请稍后再试');
				}
				if (meter.new_num === '' || meter.new_num === null) {
					return false
				}
				this.isSaveInput = true;
				biaoAdd({
					type: meter.type, //类型：1-水表，2-电表，3-燃气
					room_id: build.room_id,
					new_num: meter.new_num
				}).then(res => {
					this.$Toast('保存成功');
					setTimeout(() => {
						this.isSaveInput = false;
					}, 1000);
					this.refreshList()
				}).catch(() => {
					setTimeout(() => {
						this.isSaveInput = false;
					}, 1000);
				})
			},
			handleType() {
				uni.showActionSheet({
					itemList: ['全部', '水表', '电表', '燃气表'],
					success: (res) => {
						if (res.tapIndex !== undefined) {
							this.queryForm.type = res.tapIndex
							this.refreshList()
						}
					},
				})
			},
			handleAll() {
				this.$Tips('/pages-landlord/select-building/select-building?showAdd=false')
			},
			handleStatus() {
				uni.showActionSheet({
					itemList: ['全部', '空房', '已租', '提醒'],
					success: (res) => {
						if (res.tapIndex !== undefined) {
							this.queryForm.flag = res.tapIndex
							this.refreshList()
						}
					},
				})
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			queryList(pageNo, pageSize) {
				biaoIndex({
					...this.queryForm,
					page: pageNo,
					page_size: pageSize,
				}).then(res => {
					this.$refs.paging.complete(res.data.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F5F6F7;
	}

	.search-header {
		flex-shrink: 0;
		padding: 20rpx 30rpx;

		.search-bar-box {
			display: flex;
			align-items: center;

			.search-bar {
				flex: 1;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				padding: 16rpx 24rpx;
			}

			.search-bar input {
				flex: 1;
				margin: 0 20rpx;
				font-size: 14px;
			}

			.placeholder {
				color: #999999;
			}
		}

		.search-tip-box {
			font-size: 22rpx;
			color: #999999;
			margin: 20rpx 0;
		}
	}

	.building-list {
		.building-item {
			display: flex;
			background-color: #FFFFFF;
			padding: 28rpx 40rpx;
			border-bottom: 1px solid #f5f6fa;

			.building-box {
				margin-right: 20rpx;
				width: 200rpx;

				.building-name {
					font-size: 28rpx;
					color: #333333;
				}

				.room-name {
					font-size: 24rpx;
					color: #444444;
					font-weight: bold;
					margin-top: 10rpx;
				}
			}

			.meter-lsit {
				flex: 1;
				display: flex;
				flex-direction: column;

				.meter-item {
					margin-bottom: 20rpx;

					.meter-title {
						font-size: 24rpx;
						color: #666666;
						margin-bottom: 10rpx;
					}

					.meter-value {
						input {
							width: 100%;
							height: 60rpx;
							border: none;
							font-size: 26rpx;
							color: #333333;

							&::placeholder {
								color: #999999;
							}
						}
					}
				}

				.meter-item :last-child {
					margin-bottom: 0;
				}

			}
		}

		.building-item :last-child {
			border-bottom: none;
		}
	}

	.action-bar {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 30rpx;
		background-color: #FFFFFF;

		.action-item {
			font-weight: 600;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			text-align: center;
		}
	}
</style>
